<template>
	<div class="operation-journal">
		<div class="operation-journal__header">
			<a-form :model="form" layout="inline">
				<a-form-item field="name" label="操作人员">
					<!-- <a-input
						v-model="form.operatorPhone"
						:style="{ width: '230px' }"
						placeholder="操作人手机号"
						allow-clear
					/> -->
					<a-select v-model:model-value="form.operatorPhone" placeholder="请选择操作人" allow-search>
						<a-option
							v-for="(item, index) in adminUserSelectList"
							:key="index"
							:value="item.adminMobile"
							:label="item.adminName"
						/>
					</a-select>
				</a-form-item>
				<a-form-item field="name" label="操作日期">
					<a-range-picker
						v-model="form.searchTime"
						value-format="timestamp"
						style="width: 230px; margin-bottom: 20px"
					/>
				</a-form-item>
				<a-form-item>
					<a-button type="primary" :style="{ marginRight: '12px' }" @click="onSearchClick">查询</a-button>
					<a-button @click="resetForm">重置</a-button>
				</a-form-item>
			</a-form>
		</div>
		<a-table :columns="operationJournalColumns" :data="operationJournalData" :pagination="false">
			<template #createTime="{ record }">
				{{ dateFormat(record.createTime) }}
			</template>
			<template #type="{ record }">
				{{ typeMaps[record.type] }}
			</template>
			<template #subType="{ record }">
				{{ subTypeMaps[record.subType] }}
			</template>
			<!-- <template #operation="{ record }">
				<span class="operation__item" @click="showModel">删除</span></template
			> -->
		</a-table>
		<div class="operation-journal__pagination">
			<a-pagination v-model:current="current" :total="total" show-total @change="getOperationJournalList" />
		</div>
		<!-- <a-modal 
			class="operation-journal__modal" 
			v-model:visible="modalVisible" 
			title-align="start" 
			ok-text="删除"
			:ok-button-props="{
				status: 'danger',
			}" 
			@ok="handleOk" 
			@cancel="handleCancel"
		>
			<template #title> 确认删除 </template>
			确认删除该人员吗？
		</a-modal> -->
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import { activity, errors, user } from '@/api';

const form: any = ref({
	operatorPhone: '',
	searchTime: [],
});
const resetForm = () => {
	form.value = {
		operatorPhone: '',
		searchTime: [],
	};
	getOperationJournalList();
};

const subTypeMaps: any = {
	ORDER_LICENSE_RECORD: '授权',
	ORDER_INVOICE: '发票',
	SYSTEM_AUTH: '权限',
	USER_USER: '用户管理',
	ACTIVITY_INFO: '设置',
	ACTIVITY_INTRO_DETAIL: '合作伙伴/主办方',
	ACTIVITY_SCHEDULE: '日程',
	ACTIVITY_SHOWROOM: '展厅',
	ACTIVITY_SIGN_UP: '报名表',
	ACTIVITY_TICKET: '票',
	ACTIVITY_MEDIA: '媒体库',
	ACTIVITY_COMMENT: '评论',
	ACTIVITY_CONFRRE: '观众',
};
const typeMaps: any = {
	ACTIVITY: '直播间',
	MATERIAL: '素材库',
	ORDER: '订单',
	USER: '用户',
	SYSTEM: '系统',
};

const operationJournalColumns: any = [
	{
		title: '操作时间',
		slotName: 'createTime',
	},
	{
		title: '操作人员',
		dataIndex: 'operatorNickname',
	},
	{
		title: '模块',
		slotName: 'type',
	},
	{
		title: '业务名称',
		slotName: 'subType',
	},
	{
		title: '事件详情',
		dataIndex: 'action',
	},
	// {
	//   title: "操作",
	//   slotName: "operation",
	// },
];
const operationJournalData = ref([]);

const modalVisible = ref(false);
const handleCancel = () => {
	modalVisible.value = false;
};
const showModel = () => {
	modalVisible.value = true;
};
const handleOk = () => {
	showModel();
};

const current = ref<number>(1);
const total = ref<number>(0);
const onSearchClick = () => {
	current.value = 1;
	getOperationJournalList();
};
const getOperationJournalList = async () => {
	if (!form.value.searchTime) {
		form.value.searchTime = [];
	}
	const params = {
		pageNum: current.value,
		pageSize: 10,
		operatorPhone: form.value.operatorPhone,
		startTime: form.value.searchTime[0],
		endTime: form.value.searchTime[1],
	};
	const { ok, data } = await activity.getOperationJournalList(params);
	if (!ok) {
		return;
	}
	total.value = data.data.total;
	operationJournalData.value = data.data.records;
};
getOperationJournalList();

const adminUserSelectList = ref<Array<{ adminName: string; adminMobile: string; id: number }>>([]);
const getAdminSelectList = async () => {
	try {
		const { data, ok } = await user.getAdminSelectList();
		if (!ok) {
			return;
		}
		adminUserSelectList.value = data.data;
	} catch (error) {
		errors(error);
	}
};
getAdminSelectList();
</script>

<style lang="less">
.operation-journal {
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	padding: 16px 16px 0;
	position: relative;

	&__header {
		height: 32px;
		margin-bottom: 38px;
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 1px;
			background: #eaeaea;
			position: absolute;
			bottom: -14px;
		}
	}

	.operation__item {
		cursor: pointer;
		font-size: 14px;
		color: #ff6060;
	}

	&__pagination {
		border-top: 1px solid #f1f1f1;
		height: 48px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
	}
}

.operation-journal__modal {
	.arco-modal-footer {
		border: none;
	}
}

.arco-scrollbar-track {
	display: none;
}
</style>
